<style lang='less'>
</style>
<template>
  <div class="search-list-vue frame-page h-panel">
    <div class="h-panel-bar">
      <span class="h-panel-title">列表</span>
      <div class="h-panel-right"><Search placeholder="查询" v-width="400" v-model="params.keyword" @search="getData(true)" showSearchButton></Search></div>
    </div>
    <div class="h-panel-body">
      <div>
        <Form :label-width="80" :model="params" labelPosition="left" ref="form" v-show="showFilterForm"> 
          <Row class="search-filter-tool">
            <Cell :xs='24' :sm='12' :md='8' :lg='6' :xl='6'><FormItem label="ID" prop="id">
          <input type="text" v-model="params.id" />
        </FormItem></Cell>
<Cell :xs='24' :sm='12' :md='8' :lg='6' :xl='6'><FormItem label="审批节点" prop="workflow_type_node_id">
          <Select v-model="params.workflow_type_node_id" :datas="workflowTypeNodes" :filterable="true"></Select>
        </FormItem></Cell>
<Cell :xs='24' :sm='12' :md='8' :lg='6' :xl='6'><FormItem label="类型" prop="type">
          <Select v-model="params.type" :datas="dict" :filterable="true"></Select>
        </FormItem></Cell>
<Cell :xs='24' :sm='12' :md='8' :lg='6' :xl='6'><FormItem label="关联" prop="relation_id">
          <Select v-model="params.relation_id" :datas="adminUsers" :filterable="true"></Select>
        </FormItem></Cell>
            <Cell width="24" style="text-align: center;">
              <Button color="primary" @click="getData(true)">搜索</Button>&nbsp;&nbsp;&nbsp;
              <Button @click="reset">清空</Button>
            </Cell>
          </Row>
        </Form>
        <Row type="flex" justify="space-between" class="table-search-tools">
          <Cell width="4"><Button color="blue" icon="h-icon-plus" @click="add">新增</Button></Cell>
          <Cell width="4" class="pull-right">            
            <Button :icon-circle='true' icon="h-icon-refresh" @click="getData"></Button>
            <Button :icon-circle='true' icon="h-icon-menu" @click="openColumnsSelector"></Button>
            <Button :icon-circle='true' icon="h-icon-search" @click="showFilterForm = !showFilterForm"></Button>
          </Cell>
        </Row>
        <Table border :datas="datas" :height="400" @sort="triggerSort" :loading="loading" v-if="colsLoaded" :key="unq_table_id">
          <TableItem title="ID" prop="id" sortProp="id" :width="checkItemWidth('id')" :sort="checkItemSort('id')" v-if="checkItemShow('id')"></TableItem>
<TableItem title="审批节点" sortProp="workflow_type_node_id" :width="checkItemWidth('workflow_type_node_id')" :sort="checkItemSort('workflow_type_node_id')" v-if="checkItemShow('workflow_type_node_id')">
              <template slot-scope="{data}">
                <span>{{data.workflow_type_node?data.workflow_type_node.title:''}}</span>
              </template>
            </TableItem>
<TableItem title="类型" prop="type" sortProp="type" :width="checkItemWidth('type')" :sort="checkItemSort('type')" v-if="checkItemShow('type')"></TableItem>
<TableItem title="关联" sortProp="relation_id" :width="checkItemWidth('relation_id')" :sort="checkItemSort('relation_id')" v-if="checkItemShow('relation_id')">
              <template slot-scope="{data}">
                <span>{{data.relation?data.relation.name:''}}</span>
              </template>
            </TableItem>
<TableItem title="日期" prop="created_at" sortProp="created_at" :width="checkItemWidth('created_at')" :sort="checkItemSort('created_at')" v-if="checkItemShow('created_at')"></TableItem>
          <TableItem title="操作" align="center" :width="160" :fixed="fixed">
            <template slot-scope="{data}">
              <button class="h-btn h-btn-s h-btn-green" @click="view(data)"><i class="h-icon-search"></i></button>
              <button class="h-btn h-btn-s h-btn-blue" @click="edit(data)"><i class="h-icon-edit"></i></button>
              <Poptip content="确认删除?" @confirm="remove(datas, data)"><button class="h-btn h-btn-s h-btn-red"><i class="h-icon-trash"></i></button>
              </Poptip>
            </template>
          </TableItem>
          <div slot="empty">暂无数据</div>
        </Table>
        <Pagination v-if="pagination.total>0" align="right" v-model="pagination" @change="changePage"/>
      </div>
    </div>

    <Modal type="drawer-right" v-model="showColumnsSelector" :hasDivider="true" :hasCloseIcon="true">
      <div class="columnsSelectorTable">
        <header class="h-modal-header">列显隐与操作栏固定</header>
        <p>
          操作栏固定：<HSwitch v-model="fixed" trueValue="right" falseValue="-" small @input="fixedChange"></HSwitch>
        </p>
        <Table border :datas="columns">
          <TableItem title="列名" prop="title" :width="200"></TableItem>
          <TableItem title="隐藏" :width="90">
            <template slot-scope="{data}">
              <Checkbox v-model="data.is_hidden" @change="columnChange"></Checkbox>
            </template>
          </TableItem>
          <TableItem title="排序" :width="90">
            <template slot-scope="{data}">
              <Checkbox v-model="data.is_sort" @change="columnChange"></Checkbox>
            </template>
          </TableItem>
          <TableItem title="宽度" :width="110">
            <template slot-scope="{data}">
              <Select v-model="data.width" :datas="widthParams" style="width:80px;" :deletable="false" @change="fixedChange"></Select>
            </template>
          </TableItem>
        </Table>
      </div>      
    </Modal>

  </div>
</template>
<script>
import Form from './form';
import Detail from './detail';
import widthParams from 'model/ColumnParams';

export default {
  data() {
    return {
      datas: [{}, {}, {}],
      unq_table_id:1,
      showFilterForm:false,
      colsLoaded:false,
      fixed:"right",
      widthParams:widthParams,
      showColumnsSelector:false,
      dict:[],
      workflowTypeNodes:[],
adminUsers:[],
      columns:[
        {Field:'id',title:'ID',is_hidden:false,is_sort:false,width:50},{Field:'workflow_type_node_id',title:'审批节点',is_hidden:false,is_sort:false,width:150},{Field:'type',title:'类型',is_hidden:false,is_sort:false,width:150},{Field:'relation_id',title:'关联',is_hidden:false,is_sort:false,width:150},{Field:'created_at',title:'日期',is_hidden:false,is_sort:false,width:150}
      ],
      loading: true,
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      params: {
        keyword: null,
        sortProp: null,
        sortType: null
      }
    };
  },
  mounted() {
    R.workflowTypeNodes.dict().then(resp=>{
                  this.workflowTypeNodes = resp.data;
                });
R.adminUsers.dict().then(resp=>{
                  this.adminUsers = resp.data;
                });
    this.init();
  },
  watch: {
    params() {
      this.getData(true);
    }
  },
  methods: {
    reset() {
      this.params = {
        keyword: this.params.keyword,
        sortProp: this.params.sortProp,
        sortType: this.params.sortType
      };
      this.getData(true);
    },
    checkItemShow(field){        
      let is_hidden = false;
      this.columns.forEach(item=>{
        if(item.Field==field){
          is_hidden = item.is_hidden;
        }
      })
      return !is_hidden;
    },
    checkItemWidth(field){
      let width = 150;
      this.columns.forEach(item=>{
        if(item.Field==field){
          width = item.width || 150;
        }
      })
      return width;
    },
    checkItemSort(field){    
      let is_sort = false;
      this.columns.forEach(item=>{
        if(item.Field==field){
          is_sort = item.is_sort;
        }
      })
      return is_sort;
    },
    imagePreview(src){
      this.$ImagePreview(src);
    },
    openColumnsSelector(){
      this.showColumnsSelector = true
    },
    fixedChange(value){
      this.saveCols();
    },
    columnChange(value){
      this.unq_table_id++;
      this.saveCols();
    },
    saveCols(){
      let list = this.columns.map(item=>{
        return {
          Field:item.Field,
          is_sort:item.is_sort,
          is_hidden:item.is_hidden,
          width:item.width
        };
      });
      let content = JSON.stringify({fixed:this.fixed,list:list});
      R.Tool.saveCols({name:this.$route.name,content});
    },
    changePage(page) {
      console.log(page);
      this.page = page.cur;
      this.size = page.size;
      this.getData();
    },
    triggerSort(data) {
      this.params.sortProp = data.prop;
      this.params.sortType = data.type.toUpperCase();
      this.getData(true);
    },
    init() {
      R.Tool.getCols({name:this.$route.name}).then((resp)=>{
        this.getData();
        this.colsLoaded = true;
        resp = resp.data;
        if(resp.list && resp.fixed){
          this.fixed = resp.fixed;
          let oldCols = this.columns;
          oldCols.forEach((col)=>{
            resp.list.forEach(item=>{
              if(col.Field == item.Field){
                col.is_hidden = item.is_hidden;
                col.is_sort = item.is_sort;
                col.width = item.width||150;
              }
            })
          });
          this.columns = oldCols;
        }        
      });
    },
    toggleStatus(data,key='status'){
      let param = {id:data.id};
      param[key] = data[key]?1:0;
      R.workflowTypeNodeAuths.store(param).then(resp => {
          if(resp.code==200){
            this.$Message.success(resp.message);
          }else{
            this.getData();
            this.$Message.warn(resp.message);
          }          
      });      
    },
    openModal(item={},title='新增'){
      this.$Modal({
        title:title,
        hasCloseIcon:true,
        hasDivider:true,
        width:800,
        component: {
          vue: Form,
          datas: { params: item } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success: (modal) => {
            this.getData();
          }
        }
      });
    },
    view(data){
      let item = Object.assign({},data);
      if(item.hasOwnProperty('tags')){
        if(!item.tags){
          item.tags = [];
        }else{
          item.tags = item.tags.split(',').filter(item=>{return item!='';});
        }        
      }
      this.$Modal({
        title:'详情',
        hasCloseIcon:true,
        hasDivider:true,
        width:800,
        component: {
          vue: Detail,
          datas: { params: item } 
        },
        events: {
          success: (modal) => {
            this.getData();
          }
        }
      });
    },
    edit(data){
      let item = Object.assign({},data);
      if(item.hasOwnProperty('tags')){
        if(!item.tags){
          item.tags = [];
        }else{
          item.tags = item.tags.split(',').filter(item=>{return item!='';});
        }        
      }
      this.openModal(item,'编辑');
    },
    add(){
      this.openModal(JSON.parse('{"id":"","workflow_type_node_id":0,"type":"","relation_id":0,"created_at":""}'));
    },
    remove(datas, data) {
      datas.splice(datas.indexOf(data), 1);
      R.workflowTypeNodeAuths.delete({id:data.id}).then((resp)=>{
        this.$Message.success('删除成功');
      });      
    },
    getData(reload = false) {
      if (reload) {
        this.pagination.page = 1;
      }
      this.loading = true;    
      let size = this.pagination.size;
      let page = this.pagination.page; 
      let param = Object.assign({size,page},this.params); 
      R.workflowTypeNodeAuths.index(param).then(resp => {
        this.loading = false;
        this.datas = resp.data.list;
        this.pagination = resp.data.pagination;
      });      
    }
  },
  computed: {

  }
};
</script>
